<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  * {
    padding: 0;
    margin: 0;
  }

  body,
  html {
    width: 100%;
    height: 100%;
  }

  .store-login {
    background-color: white;
    height: 100%;
    position: relative;
  }

  .bg-login {
    /*background: url("../../public/img/3Dbg01.jpg") no-repeat;*/
    /*background-size: 100% 100%;*/
    position: relative;
    height: 100%;
    opacity: 0.8;
    z-index: 1;
  }

  .bg-login>li {
    list-style: none;
    /*display: none;*/
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .bg-login>li>img {
    width: 100%;
    height: 100%;
    opacity: 0.9;
    transition: ease .5s;
  }

  .login-s {
    position: absolute;
    width: 350px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    z-index: 2;
    box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
    text-align: center;
  }

  .login_form {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 30px;
  }
</style>

<body>
  <div class="store-login" id="app">
    <!-- 背景  -->
    <div class="bg-login">
      <li v-for="bgimg in bgImages">
        <img :src="bgimg">
      </li>
    </div>
    <div class="login-s">
      <!-- 登录表单 -->
      <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="填写这个就行了"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</body>

<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<script src="js/axios.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        bgImages: [
          './image/bg3.jpg'
        ],
        loginFormRules: {
          username: [{
            required: true,
            message: '请输入登录名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '登录名长度在 3 到 10 个字符',
            trigger: 'blur'
          }
          ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
          ]
        }
      }
    },
    created: function () {
    },
    mounted: function () {
    },
    methods: {
      resetLoginForm() {
        this.$refs.LoginFormRef.resetFields()
      },
      login: function () {
        console.log(this.loginForm.username)
        setCookie('userId', this.loginForm.username, 180)
        this.toChatPage()
      },
      toChatPage() {
        let userId = getCookie('userId')
        if (userId != null) {
          window.location.href = 'chat.html'
        }
      }
    }
  })

  function setCookie(key, value, t) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + t);
    document.cookie = key + "=" + value + "; expires=" + oDate.toDateString();
  }

  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i].trim();
      if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
  }
</script>

</html>